<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>wjの携程爬虫</title>
    <style>
        html, body {
            padding: 0 auto;
            margin: 0 auto;
        }

        #app {
            width: 50%;
            height: auto;
            margin: 0 auto;
        }

        .from {
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="from">
        <p style="font-size: 20px;text-align: center;">携程图片抓取</p>
        <el-form ref="ruleForm" :model="form" label-width="80px" label-position="top" :rules="rules">

            <el-form-item label="poiID" prop="poiID">
                <el-input v-model="form.poiID"></el-input>
            </el-form-item>

            <el-form-item label="districtId" prop="districtId">
                <el-input v-model="form.districtId"></el-input>
            </el-form-item>

            <el-form-item label="districtEName" prop="districtEName">
                <el-input v-model="form.districtEName"></el-input>
            </el-form-item>

            <el-form-item label="resourceId" prop="resourceId">
                <el-input v-model="form.resourceId"></el-input>
            </el-form-item>

            <el-form-item label="抓取页数" prop="page">
                <el-input type="number" v-model="form.page"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" :loading="start.loading" @click="startGrasp()">{{start.text}}</el-button>
            </el-form-item>

        </el-form>

        <el-progress :percentage="percentage*10" v-show="percentageShow"></el-progress>
    </div>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            start: {
                loading: false,
                text: '开始抓取'
            },
            form: {
                poiID: '95355',
                districtId: '120478',
                districtEName: 'Seda',
                resourceId: '133401',
                page: '2'
            },
            percentage: 0,
            percentageShow:false,
            rules: {
                poiID: [{required: true, message: '请输入poiID', trigger: 'blur'}],
                districtId: [{required: true, message: '请输入districtIdD', trigger: 'blur'}],
                districtEName: [{required: true, message: '请输入districtEName', trigger: 'blur'}],
                resourceId: [{required: true, message: '请输入resourceId', trigger: 'blur'}],
                page: [{required: true, message: '请输入page', trigger: 'blur'}],
            },
            callbackList: '',
        },
        methods: {
            // 开始抓取
            startGrasp() {
                let vm = this
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.start.loading = true
                        this.$message({
                            message: '开始抓取。。。',
                            type: 'success'
                        });
                        axios.post('http://localhost/index/index/grasp', {data: this.form}).then(function (res) {

                            if (res.data.code == 1) {
                                vm.percentageShow = true
                                vm.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                vm.callbackList = res.data.data
                                vm.save();
                            } else {
                                vm.$message({
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }
                        })
                    }
                })
            },
            // 保存文件
            save() {
                let vm = this
                axios.post('http://localhost/index/index/save', {
                    data: this.callbackList,
                    number: this.percentage
                }).then(function (res) {

                    if (res.data.code == 1) {
                        vm.percentage++
                        if(vm.percentage < vm.callbackList.count){
                            vm.save();
                        }else{
                            vm.percentage = 10
                            vm.$message({
                                message: '下载完成,生成压缩包中,生成完成自动下载,请稍等~',
                                type: 'success'
                            });
                            vm.download()
                        }
                    }
                })
            },
            // 下载文件
            download(){
                let vm = this
                axios.post('http://localhost/index/index/download', {
                    data: this.callbackList,
                }).then(function (res) {
                    window.location.href = res.data.data;
                    vm.percentage = 0;
                    vm.percentageShow = false;
                    vm.start.loading = false;
                })
            }
        }
    })
</script>
</html>